<template>
    <div class="ball-container">
        <div v-for="ball in balls">
            <transition name="drop"
                        @before-enter="beforeDrop"
                        @enter="dropping"
                        @after-enter="afterDrop"
            >
                <div class="ball" v-show="ball.show">
                    <div class="inner inner-hook"></div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
export default {
    name:'ball',
    data(){
        return{
           balls: [ //生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画
                {
                    show: false //维护当前小球的状态
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                },
                {
                    show: false
                }
            ],
            dropBalls: [], //dropBalls数组接收下落小球,用来存贮已经下落的小球
        }
    },
    methods:{
         ////触发一次事件就会将所有小球进行遍历
        drop(el){

            //el代表点击的添加商品按钮icon-add_circle,而不是小球
            for (let i = 0; i < this.balls.length; i++) {
                let ball = this.balls[i];
                if (!ball.show) { //将false的小球放到dropBalls
                    ball.show = true;
                    ball.el = el; //设置小球的el属性为一个dom对象
                   // this.$set(ball,'el',el)
                    this.dropBalls.push(ball);
                    return;  //在所有的小球中只要找到1个ball.show = true;就可以了，不用把所有的小球都有要有设置为true
                }
            }

        },
        //下面方法beforeDrop，dropping，afterDrop都是动画方法
        beforeDrop(el) {  //这个方法的执行是因为这是一个vue的监听事件,动画enter之前
            //把使用到的小球从起始位置（购物车位置）上升到添加按钮位置
            //在这时el与上面的drop（el）不是同一个el,这里的el代表的是类为ball的div及其子元素
            let count = this.balls.length;
            //先找到所有为true的小球（连续点击的情况）
            while (count--) { //循环执行并判断
                let ball = this.balls[count];
                if (ball.show) { //下落的小球
                    //外层元素是纵向的动画，内层元素是横向的动画
                    //el.getBoundingClientRect()这个方法返回一个矩形对象，
                    // 包含四个属性：left、top、right和bottom。分别表示元素的左，上，右和下分别相对【浏览器视窗】的位置。
                    //ball.el与el不是同一个，ball.el是指点击添加按钮时的那个el
                    let rect = ball.el.getBoundingClientRect(); //获取小球的相对于视口的位移(小球高度)
                    let x = rect.left - 32; //当前按钮和购物车中小球的left的差值
                    //window.innerHeight文档显示区域的宽高,y表示的是按钮到购物车的高度
                    let y = -(window.innerHeight - rect.top - 22); //负数,因为是从左上角往下的的方向【】
                    el.style.display = '';
                    //el的动画偏移
                    el.style.webkitTransform = `translate3d(0,${y}px,0)`;
                    el.style.transform = `translate3d(0,${y}px,0)`;
                    //处理内层动画,确定小球的起始位置
                    let inner = el.getElementsByClassName('inner-hook')[0];
                    inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
                    inner.style.transform = `translate3d(${x}px,0,0)`;
                }
            }
        },

        dropping(el, done) { //动画enter进入
            //rf是为了触发浏览器的重排
            //*添加、删除、更新DOM节点
       // *通过display: none隐藏一个DOM节点-触发重排和重绘
           // *通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
           // *移动或者给页面中的DOM节点添加动画
           // *添加一个样式表，调整样式属性
            //*用户行为，例如调整窗口大小，改变字号，或者滚动。
        //*获取某些元素的属性（我使用的方法）
            let rf = el.offsetHeight;  //触发重绘html
            this.$nextTick(() => {  //回调函数异步执行，两个动画效果就不会卡顿了
                el.style.webkitTransform = 'translate3d(0,0,0)';
                el.style.transform = 'translate3d(0,0,0)';
                let inner = el.getElementsByClassName('inner-hook')[0];
                inner.style.webkitTransform = 'translate3d(0,0,0)';
                inner.style.transform = 'translate3d(0,0,0)';
                el.addEventListener('transitionend', done);
            });

        },
        afterDrop(el) { //动画进入之后
            let ball = this.dropBalls.shift();//完成一次动画就删除一个dropBalls的小球
            if (ball) {
                ball.show = false;
                el.style.display = 'none'; //隐藏小球
            }
        },
    },
    mounted() {
        this.$bus.$on("add",this.drop)
    }
}
</script>

<style lang="less" scoped>
    .ball-container{
        .ball{
            position: fixed;
            left: 0.32rem;
            bottom: 0.22rem;
            z-index: 200;
            transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
            .inner{
                width: 0.2rem;
                height: 0.2rem;
                border-radius: 50%;
                background: red;
                transition: all 0.42s linear;
            }
        }
    }
</style>